<template>
    <div>
        <div v-for="list in listmeber" :key="list.id">
            <div class="getOut" @click="drawer = false">
                <i class="el-icon-arrow-left"></i>
            </div>
            <div class="getOut-top">
                <div class="getOut-top-img">
                    <img src="" alt="">
                </div>
                <div class="getOut-top-text">
                    <div>
                             
                        <span>{{list.memberName}}</span>
                        <span>{{list.phoneNumber}}</span>
                    </div>
                    <div class="getOut-top-text-img">
                        <img src="" alt="">
                        <span v-if="list.vipLevelId==1">普通会员</span>
                        <span v-else-if="list.vipLevelId==2">黄金会员</span>
                        <span v-else-if="list.vipLevelId==3">砖石会员</span>
                    </div>
                </div>
            </div>
            <div class="getOut-button">
                <button>会原卡解挂</button>
                <button>会原卡解挂</button>
                <button>会原卡解挂</button>
                <button>会原卡解挂</button>
                <button>会原卡解挂</button>
            </div>
            <div class="message">
                <div class="message-text" v-for="item in message" :key="item._id" :class="{active:cur==item.text}"
                    @click="cur=item.text">{{item.text}}</div>
            </div>
            <div v-if="cur=='基本信息'" class="conter">
                <div class="conter1">

                    <div>
                        <label>会员卡：</label><span>{{list.idCard}}</span>
                    </div>
                    <div>
                        <label>手机号码：</label><span>{{list.phoneNumber}}</span>
                    </div>
                    <div>
                        <label>会员等级：</label><span> <span v-if="list.vipLevelId==1">普通会员</span>
                            <span v-else-if="list.vipLevelId==2">黄金会员</span>
                            <span v-else-if="list.vipLevelId==3">砖石会员</span></span>
                    </div>
                    <div>
                        <label>会员余额：</label><span>{{list.over}}</span>
                    </div>
                </div>
                <div class="conter2">
                    <div>
                        <label>开卡时间：</label><span>{{list.creationTime}}</span>
                    </div>
                    <div>
                        <label>出生日期：</label><span>{{list.birthday}}</span>
                    </div>
                    <div>
                        <label>会员积分：</label><span v-if='list.integration'>暂无积分</span> <span v-else>{{list.integration}}</span>

                    </div>
                </div>
            </div>
            <div v-if="cur=='消费信息'">
                <div class="conterXF">
                    <div class="conterXF1">
                        <div class="conterXF1-1">
                            <label>订单号：<span>0D01904253</span></label>
                            <label>房间号：<span>102</span></label>
                            <label>时间：<span>2019-01-02</span> <span>13:35:25</span></label>
                            <label v-if="true" style="color:#e983af;font-size:14px;margin-left:32px">待付款</label>
                            <label v-else style="color:#5c99f1;font-size:14px;margin-left:32px">已付款</label>
                        </div>
                        <div class="conterXF1-2">
                            <div class="conterXF1-2-1">
                                <div> 购买项目 </div>
                                <div>欧迪足道</div>
                            </div>
                            <div class="conterXF1-2-2">
                                <div> 数量 </div>
                                <div>X1</div>
                            </div>
                            <div class="conterXF1-2-3">
                                <div> 技师 </div>
                                <div>1子</div>
                            </div>
                            <div class="conterXF1-2-4">
                                <div> 价格 </div>
                                <div>￥75.00</div>
                            </div>
                            <div class="conterXF1-2-5">
                                <div> 合计 </div>
                                <div>￥75.00</div>
                            </div>
                        </div>

                    </div>
                   
                    <div class="foot">
                        <button class="foot-button1">上一页</button>
                        <span>1/5</span>
                        <button class="foot-button2">下一页</button>
                    </div>
                </div>
            </div>
            <div v-if="cur=='充值信息'" class="conterCZ">
                <div class="conterCZ1">
                    <el-table :data="tableData" border style="width: 100%;">
                        <el-table-column prop="time" label="时间" width="150" align="center">
                        </el-table-column>
                        <el-table-column prop="money" label="充值今额" width="100" align="center">
                        </el-table-column>
                        <el-table-column prop="given" label="赠送金额" width="100" align="center"></el-table-column>
                        <el-table-column prop="pay" label="支付方式" align="center"></el-table-column>
                    </el-table>
                </div>

                <div class="foot">
                    <button class="foot-button1">上一页</button>
                    <span>1/5</span>
                    <button class="foot-button2">下一页</button>
                </div>
            </div>
            <div v-if="cur=='积分明细'" class="conterCZ">
                <div class="conterCZ1">
                    <el-table :data="tableData" border style="width: 100%;">
                        <el-table-column prop="time" label="时间" width="150" align="center">
                        </el-table-column>
                        <el-table-column prop="money" label="充值今额" width="100" align="center">
                        </el-table-column>
                        <el-table-column prop="given" label="赠送金额" width="100" align="center"></el-table-column>
                        <el-table-column prop="pay" label="支付方式" align="center"></el-table-column>
                    </el-table>
                </div>

                <div class="foot">
                    <button class="foot-button1">上一页</button>
                    <span>1/5</span>
                    <button class="foot-button2">下一页</button>
                </div>
            </div>

            <div v-if="cur=='礼物信息'" class="conterCZ">
                <div class="conterCZ1">
                    <el-table :data="tableData" border style="width: 100%;">
                        <el-table-column prop="time" label="时间" width="155" align="center">
                        </el-table-column>
                        <el-table-column prop="money" label="兑换礼物" width="140" align="center">
                        </el-table-column>
                        <el-table-column prop="given" label="兑换方式" width="140" align="center"></el-table-column>
                    </el-table>
                </div>

                <div class="foot">
                    <button class="foot-button1">上一页</button>
                    <span>1/5</span>
                    <button class="foot-button2">下一页</button>
                </div>
            </div>

        </div>
    </div>


</template>

<script>
    import {
        createNamespacedHelpers
    } from "vuex";
    const {
        mapActions,
        mapState
    } = createNamespacedHelpers(
        "member"
    );
    export default {
        props: ['id'],
        data() {
            return {
                message: [{
                        _id: 1,
                        text: '基本信息'
                    },
                    {
                        _id: 2,
                        text: '消费信息'
                    },
                    {
                        _id: 3,
                        text: '充值信息'
                    },
                    {
                        _id: 4,
                        text: '积分明细'
                    },
                    {
                        _id: 5,
                        text: '礼物信息'
                    },
                ],
                cur: "基本信息",
                tableData: [{
                        time: '2016-05-02',
                        money: '￥200.00',
                        given: '￥20.00',
                        pay: '微信'
                    },
                    {
                        time: '2016-05-02',
                        money: '￥200.00',
                        given: '￥20.00',
                        pay: '微信'
                    },
                    {
                        time: '2016-05-02',
                        money: '￥200.00',
                        given: '￥20.00',
                        pay: '微信'
                    },
                    {
                        time: '2016-05-02',
                        money: '￥200.00',
                        given: '￥20.00',
                        pay: '微信'
                    },

                ]
            }
        },
        mounted() {
            // this.memberSech(this.id);
        },
        computed: {
            ...mapState(['listmeber']),
            drawer: {
                get() {
                    return this.$store.state.member.drawer
                },
                set(val) {
                    this.$store.state.member.drawer = val;
                    
                }
            }

        },

        methods: {
            ...mapActions(['memberSech'])
        }
    }
</script>

<style scoped lang="scss">
    .getOut {
        float: left;
        width: 50px;
        color: #0085ff;
        font-size: 14px;
        margin: 10px;

        /deep/ .el-icon-arrow-left {
            font-size: 30px;
            font-weight: 700;
        }

    }

    .getOut-top {
        width: 50%;
        height: 70px;
        margin: 0 auto;
        // border: 1px solid red;
        margin-top: 15px;
        display: flex;

        .getOut-top-img {
            width: 70px;
            height: 70px;
            //  border: 1px solid red;
            margin-right: 10px;

            img {
                width: 70px;
                height: 70px;

            }
        }

        .getOut-top-text {
            font-weight: 600;
            font-size: 14px;

            .getOut-top-text-img {
                width: 100px;
                height: 50px;

                //  border: 1px solid red;
                img {
                    width: 15px;
                    height: 20px;
                    border: 1px solid red;
                    margin-top: 15px;
                }

                span {
                    color: #f3cb9a;
                    margin-left: 10px;
                }
            }
        }
    }

    .getOut-button {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        padding-left: 20px;
        padding-right: 20px;

        button {
            border: none;
            width: 18%;
            height: 28px;
            background-image: linear-gradient(90deg, #0af, #0085ff);
            color: #fff;
        }
    }

    .message {
        width: 85%;
        height: 45px;
        margin: 0 auto;
        border-bottom: 1px solid #9e9e9e;
        margin-top: 15px;
        display: flex;
        justify-content: space-between;

        .message-text {
            width: 18%;
            height: 40px;
            // border: 1px solid red;
            line-height: 40px;
            font-weight: 600;
            font-size: 14px;
        }
    }

    .conter {
        width: 85%;
        height: auto;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-top: 20px;

        .conter1 {
            width: 48%;
            height: 120px;


            div {
                width: 100%;
                height: 25px;
                margin-bottom: 8px;
                text-align: left;
                font-size: 14px;
            }
        }

        .conter2 {
            width: 48%;
            height: 120px;

            div {
                width: 100%;
                height: 25px;
                margin-bottom: 8px;
                text-align: left;
                font-size: 14px;
            }
        }
    }

    .active {
        border-bottom: 5px solid #2d8cff;
    }

    .conterXF {
        width: 85%;
        height: 260px;
        // border: 1px solid red;
        margin: 0 auto;
        margin-top: 15px;

        .conterXF1 {
            width: 100%;
            height: 80px;
            border: 1px solid rgb(231, 236, 245);
            border-radius: 10px;
            margin-bottom: 8px;
            font-size: 12px;
            text-align: left;

            .conterXF1-1 {
                height: 30px;
                background-color: #e7ecf5;
                line-height: 30px;

                //   border-radius:1px 10px 10px  ;
                label {
                    margin-left: 15px;
                }
            }

            .conterXF1-2 {
                width: 100%;
                height: 50px;
                //  border: 1px solid red;
                display: flex;
                justify-content: space-between;
                text-align: center;

                .conterXF1-2-1 {
                    width: 30%;
                    height: 50px;

                    div {
                        margin: 5px;
                    }
                }

                .conterXF1-2-2 {
                    width: 15%;
                    height: 50px;

                    div {
                        margin: 5px;
                    }
                }

                .conterXF1-2-3 {
                    width: 15%;
                    height: 50px;

                    div {
                        margin: 5px;
                    }
                }

                .conterXF1-2-4 {
                    width: 20%;
                    height: 50px;

                    div {
                        margin: 5px;
                    }
                }

                .conterXF1-2-5 {
                    width: 20%;
                    height: 50px;

                    div {
                        margin: 5px;
                    }
                }
            }
        }
    }

    .conterCZ {
        width: 85%;
        height: 350px;
        margin: 0 auto;
        margin-top: 15px;

        .conterCZ1 {
            width: 90%;
            height: 250px;
            margin: 0 auto;
        }
    }

    .foot {
        width: 100%;
        height: 40px;
        padding-top: 10px;

        .foot-button1 {
            width: 58px;
            height: 28px;
            border: none;
            margin-right: 15px;
        }

        .foot-button2 {
            width: 58px;
            height: 28px;
            border: none;
            background-image: linear-gradient(90deg, #0af, #0085ff);
            color: #fff;
            margin-left: 15px;
        }
    }
</style>